<template>
    <el-container class="layout-container">
        <!-- 侧边栏 -->
        <el-aside :width="isCollapse ? '64px' : '200px'" class="transition-all duration-300">
            <div class="logo-container">
                <img v-if="!isCollapse" src="" class="h-8" alt="logo">
                <el-icon v-else class="text-2xl text-white">
                    <ElementPlus />
                </el-icon>
            </div>

            <el-menu :collapse="isCollapse" :collapse-transition="true" class="h-[calc(100%-60px)]"
                :default-active="activeMenu" router background-color="#001529" text-color="#fff"
                active-text-color="#409EFF">
                <template v-for="route in menuRoutes" :key="route.path">
                    <el-menu-item v-if="!route.children && !route.meta?.hidden" :index="route.path">
                        <el-icon v-if="route.meta?.icon">
                            <component :is="route.meta.icon" />
                        </el-icon>
                        <template #title>{{ route.meta?.title }}</template>
                    </el-menu-item>

                    <template v-else-if="route.children">
                        <el-menu-item v-for="child in route.children" :key="child.path" v-show="!child.meta?.hidden"
                            :index="'/' + child.path">
                            <el-icon v-if="child.meta?.icon">
                                <component :is="child.meta.icon" />
                            </el-icon>
                            <template #title>{{ child.meta?.title }}</template>
                        </el-menu-item>
                    </template>
                </template>
            </el-menu>
        </el-aside>

        <!-- 右侧内容区 -->
        <el-container>
            <!-- 头部 -->
            <el-header class="flex items-center justify-between bg-white border-b">
                <div class="flex items-center">
                    <el-icon class="text-xl cursor-pointer hover:text-blue-500 transition-colors"
                        @click="isCollapse = !isCollapse">
                        <Fold v-if="!isCollapse" />
                        <Expand v-else />
                    </el-icon>
                    <el-breadcrumb class="ml-4">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>{{ currentMenu }}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>

                <!-- 用户信息放在header右侧 -->
                <div class="flex items-center">
                    <el-dropdown trigger="click" @command="handleCommand">
                        <div class="flex items-center cursor-pointer">
                            <el-avatar :size="32" class="mr-2" />
                            <span class="text-gray-600">管理员</span>
                            <el-icon class="ml-1">
                                <CaretBottom />
                            </el-icon>
                        </div>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="profile">
                                    <el-icon class="mr-1">
                                        <User />
                                    </el-icon>
                                    个人信息
                                </el-dropdown-item>
                                <el-dropdown-item command="password">
                                    <el-icon class="mr-1">
                                        <Lock />
                                    </el-icon>
                                    修改密码
                                </el-dropdown-item>
                                <el-dropdown-item divided command="logout">
                                    <el-icon class="mr-1">
                                        <SwitchButton />
                                    </el-icon>
                                    退出登录
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <!-- 主要内容区 -->
            <el-main class="bg-[#f0f2f5] p-4 relative">
                <loding v-if="useLodingStore().loading" />
                <router-view v-slot="{ Component }">
                    <transition name="fade" mode="out-in">
                        <component :is="Component" />
                    </transition>
                </router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup lang="ts">
import { useLodingStore } from '@/stores/loding'
import loding from '@/components/loding.vue'
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import {
    Fold,
    Expand,
    CaretBottom,
    ElementPlus,
    User,
    Lock,
    SwitchButton
} from '@element-plus/icons-vue'
import { routes } from '@/router/routes'

const route = useRoute()
const router = useRouter()
const isCollapse = ref(false)

// 获取菜单路由
const menuRoutes = computed(() => {
    return routes[1].children || []
})

// 获取当前菜单标题
const currentMenu = computed(() => {
    const currentRoute = menuRoutes.value.find(item => route.path.includes(item.path))
    return currentRoute?.meta?.title || ''
})
// 添加新的计算属性用于激活菜单
const activeMenu = computed(() => {
    // 移除开头的斜杠(如果有)并获取第一段路径
    const path = route.path.replace(/^\//, '').split('/')[0]
    return path
})

// 处理下拉菜单命令
const handleCommand = (command: string) => {
    switch (command) {
        case 'profile':
            router.push('/profile')
            break
        case 'password':
            // 处理修改密码
            break
        case 'logout':
            ElMessageBox.confirm(
                '确定要退出登录吗？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                // 这里处理退出登录逻辑
                localStorage.removeItem('X-Auth-Token')
                router.push('/login')
            }).catch(() => { })
            break
    }
}
</script>

<style scoped>
/* 添加路由切换动画 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.layout-container {
    @apply h-screen;
}

.logo-container {
    @apply h-[60px] flex items-center justify-center bg-[#002140] text-white;
}

:deep(.el-header) {
    @apply h-[60px] leading-[60px] p-0 px-4;
}

:deep(.el-aside) {
    @apply bg-[#001529] text-white;
}

:deep(.el-menu) {
    @apply border-r-0;
}

:deep(.el-menu-item) {
    @apply text-[#fff] bg-[#001529] transition-all duration-300;
}

:deep(.el-menu-item.is-active) {
    @apply bg-[#1890ff] text-white;
}

:deep(.el-menu-item:hover) {
    @apply bg-[#1890ff] text-white;
}

:deep(.el-menu--collapse) {
    @apply w-[64px];
}


:deep(.el-main) {
    @apply p-0 flex-1;
    /* 添加 flex-1 */
}

/* 添加新的样式 */
:deep(.el-container) {
    @apply h-full;
    /* 确保内部容器也是全高的 */
}

:deep(.el-dropdown-menu__item) {
    @apply flex items-center;
}

/* 添加菜单展开/收起动画 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.el-aside {
    transition: width 0.3s ease-in-out;
}

.el-menu {
    transition: width 0.3s ease-in-out;
}
</style>